<template>
  <div class="app-container">
    <!-- 顶部搜索 -->
    <div class="top-bar">
      <!-- 背景轮播 -->
      <div class="bg"></div>
      <!-- 搜索区域 -->
      <div class="search-area">
        <div class="search-input">
          <div class="el-autocomplete">
            <el-input
              suffix-icon="el-icon-search"
              class="input"
              size="medium"
            ></el-input>
          </div>
        </div>
        <div class="hot-search">
          <div class="hot-search-label">热门搜索：</div>
          <div class="hot-search-list">
            <a
              href=""
              class="hot-search-list-item"
              v-for="item in 4"
              :key="item"
            >
              localStroage和
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <el-row :gutter="20">
        <!-- 左侧 -->
        <el-col :span="18">
          <!-- 精选课程：第一部分 -->
          <div class="course">
            <!-- top -->
            <div class="top">
              <span>精选课程</span>
              <a href="/course-index" class="more">
                更多
                <i class="el-icon-arrow-right"> </i>
              </a>
            </div>
            <!-- body -->
            <div class="body">
              <div class="course-box" v-for="item in 6" :key="item">
                <a href="" class="title line"> Java实战之Redis入门到精通 </a>
                <div class="desc line">
                  简介：本门课程主要讲解的是缓存中间件Redis常见且典型的数据结构
                </div>
                <div>
                  <span class="tag">钟林森</span>
                  <span class="tag">开发组长/高级工程师</span>
                </div>
                <div class="bottom-content">
                  <span class="free">超级会员</span>
                  <span class="price"><em>¥ </em>29.00</span>
                  <span class="gray-price"> ¥69.00</span>
                  <span class="flex"></span>
                  <span class="view">123人观看</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 精选专栏：第二部分 -->
          <div class="course">
            <!-- top -->
            <div class="top">
              <span>精选专栏</span>
              <a href="/topic-index" class="more">
                更多
                <i class="el-icon-arrow-right"> </i>
              </a>
            </div>
            <!-- body -->
            <div class="body">
              <div class="column" v-for="item in 4" :key="item">
                <a href="" class="left-img">
                  <img
                    src="../../assets/images/swaper1.png"
                    alt=""
                    class="bg-img"
                  />
                </a>
                <div class="course-info">
                  <a href="" class="title line"
                    >Python 全栈 450 道常见问题全解析（配套教学）</a
                  >
                  <span class="desc line"
                    >一次性扫除你在 60 天精通之路上的学习障碍</span
                  >
                  <span class="author line">zglg · 某大厂算法工程师</span>
                  <div class="bottom-content">
                    <span class="cur-price"> <em>¥ </em>168 </span>
                    <span class="course-num">109节</span>
                    <span class="view">· 3581已学</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 精选资源：第三部分 -->
          <div class="resources">
            <div class="card-header">
              <span class="header-title">精选资源</span>
              <a href="/download-index" class="more-link">
                更多
                <i class="el-icon-arrow-right"> </i>
              </a>
            </div>
            <!-- 资源列表详情 -->
            <div class="card-content">
              <div class="content-item" v-for="item in 12" :key="item">
                <!-- 图 -->
                <a :href="['/downloadResources/'+item]">
                  <div class="item-img">
                    <div class="thumbnail">
                      <div class="file-tag line">java</div>
                      <div class="file-size">大小：168KB</div>
                      <div class="hidden">
                        <div class="file-desc line-2">
                          核心算法都比较简单，只是适合选手们快速上手。
                          核心算法都比较简单，只是适合选手们快速上手。
                        </div>
                      </div>
                    </div>
                    <img
                      class="file-type-icon"
                      src="../../assets/images/fileType/docx.png"
                      alt=""
                    />
                  </div>
                </a>
                <!-- 名 -->
                <a :href="['/downloadResources/'+item]" class="item-title line-2">
                  相对熵优化变分模态分解(KL-VMD).rar
                </a>
                <!--  -->
                <a :href="['/downloadResources/'+item]">
                  <div class="item-extra">
                    <div class="flex flex-hc">
                      <i class="el-icon-star-on"></i>
                      <span class="">5.0</span>
                    </div>
                    <div class="divide"></div>
                    <div class="text-gray line">1234 浏览</div>
                  </div>
                </a>
                <!--  -->
                <div class="price"><em>¥ </em>12.9</div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="6">
          <!-- 一 -->
          <div class="user-info">
            <div class="top-info">
              <img src="@/assets/images/vip-icon.png" alt="" />
              <div class="info">
                <div class="nick-name line">蘑菇博客会员</div>
                <div class="vip-info">开通年卡参与万元壕礼抽奖</div>
              </div>
            </div>
            <div class="bottom-info">
              <div class="top-content">
                <div class="welfare">
                  <div class="text">
                    预估减
                    <em>50</em>
                    元
                  </div>
                </div>
                <div class="rights">
                  <a href="" class="center">
                    <i class="el-icon-upload"></i>
                    <span> VIP资源</span>
                  </a>
                  <a href="" class="center">
                    <i class="el-icon-s-management"></i>
                    <span>正版电子书</span>
                  </a>
                  <a href="" class="center">
                    <i class="el-icon-s-goods"></i>
                    <span> 会员专享价</span>
                  </a>
                  <a href="" class="center">
                    <i class="el-icon-s-order"></i>
                    <span>课程&专栏</span>
                  </a>
                </div>
              </div>
              <!-- 开通vip -->
              <a href="" class="vip-button">
                <span class="preferential">全年可省5,000元</span>
                <span class="open-vip">立即开通</span>
              </a>
            </div>
          </div>
          <!-- 二 -->
          <div class="upload-sidebar">
            <div class="upload-button">
              <div class="btn">
                <i class="el-icon-plus"></i>
                上传资源 快速挣钱
              </div>
            </div>

            <div class="user-menu">
              <ul>
                <li @click="tagShow = !tagShow">
                  <i class="el-icon-folder-add"></i>
                  <span>我的内容管理</span>
                  <span class="tip">
                    {{ tagShow === false ? '展开' : '收起' }}
                    <i
                      :class="
                        tagShow === false
                          ? 'el-icon-arrow-right'
                          : 'el-icon-arrow-down'
                      "
                    ></i>
                  </span>
                </li>
                <el-collapse-transition>
                  <div class="info-detail" v-show="tagShow">
                    <li>
                      <i class="el-icon-folder-add"></i>
                      <span>我的资源</span>
                      <span class="tip">
                        0个
                        <i class="el-icon-arrow-right"></i>
                      </span>
                    </li>
                    <li>
                      <i class="el-icon-wallet"></i>
                      <span>我的收益</span>
                      <span class="tip">
                        预估收益
                        <em>9.9</em>
                        元
                        <i class="el-icon-arrow-right"></i>
                      </span>
                    </li>
                    <li>
                      <i class="el-icon-medal"></i>
                      <span>我的积分</span>
                      <span class="tip">
                        0
                        <i class="el-icon-arrow-right"></i>
                      </span>
                    </li>
                    <li>
                      <i class="el-icon-coin"></i>
                      <span>我的C币</span>
                      <span class="tip">
                        0
                        <i class="el-icon-arrow-right"></i>
                      </span>
                    </li>
                    <li>
                      <i class="iconfont icon-shoucang"></i>
                      <span>我的收藏</span>
                      <span class="tip">
                        <i class="el-icon-arrow-right"></i>
                      </span>
                    </li>
                    <li>
                      <i class="el-icon-download"></i>
                      <span>已下载</span>
                      <span class="tip">
                        <i class="el-icon-arrow-right"></i>
                      </span>
                    </li>
                  </div>
                </el-collapse-transition>
              </ul>
            </div>
            <div class="user-tip">
              <i class="el-icon-mic"></i>
              <el-carousel height="200px" direction="vertical">
                <el-carousel-item v-for="item in 3" :key="item">
                  <span>
                    构建安全的 ASP.NET 应用程序(中文译作+英文原作)被m**6下载，
                  </span>
                  <span class="money">
                    赚了<em>{{ item }}</em
                    >元
                  </span>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <!-- 三 -->
          <div class="latest-file-card">
            <div class="title">热门资源</div>
            <ul>
              <li v-for="item in 10" :key="item">
                <div class="open-item">
                  <div class="rank bg">
                    <span class="align">{{ item }}</span>
                  </div>
                  <a href="" class="line open-title">
                    apache-jmeter-5.1.1(Requires Java 8+).zip
                  </a>
                </div>
              </li>
            </ul>
          </div>
          <!-- 四 -->
          <div class="shadow-card">
            <div class="title">优质知识分享者</div>
            <div class="shadow-box">
              <ul>
                <li v-for="item in 5" :key="item">
                  <a href="">
                    <img src="../../assets/logo.png" alt="" class="imgs" />
                    <div class="info-user">
                      <div class="name line">创创大帝(水印很浅-下载的文档)</div>
                      <div class="description">一个即将秃头的程序员</div>
                      <div class="extension">
                        <span>粉丝1206</span>
                        <span class="dot">·</span>
                        <span>被下载次数733</span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'download-resource', // 下载·课程首页
  data() {
    return {
      tagShow: false
    }
  }
}
</script>

<style lang="less" scoped>
.top-bar {
  .bg {
    background-image: url('../../assets/images/resources.jpg');
    height: 250px;
    background-size: cover;
    background-position: center 0;
  }
  .search-area {
    display: flex;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 190px;
    z-index: 2;
    left: 50%;
    margin-left: -280px;
    width: 560px;
    .search-input {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      .el-autocomplete {
        width: 560px;
        height: 40px;
      }
    }

    .hot-search {
      display: flex;
      padding: 16px 45px;
      align-items: center;
      color: #fff;
      min-width: 560px;
      .hot-search-label {
        white-space: nowrap;
      }
      .hot-search-list {
        height: 25px;
        width: 490px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        .hot-search-list-item {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
          color: #fff;
          display: inline-block;
          height: 24px;
          line-height: 24px;
          background-color: rgba(34, 34, 38, 0.1);
          border-radius: 2px;
          padding: 0 13px;
          max-width: 150px;
          margin-left: 12px;
          margin-bottom: 2px;
          -webkit-transition: background-color 0.25s ease;
          transition: background-color 0.25s ease;
          font-size: 14px;
        }
      }
    }
  }
}
.course {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  margin-top: 40px;
  .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    span {
      font-size: 16px;
      font-weight: 600;
      color: #222226;
      line-height: 24px;
    }
    .more {
      font-size: 12px;
      font-weight: 300;
      color: #999aaa;
      line-height: 16px;
    }
  }
  .body {
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #f7f7fc;
    border-top: 1px solid #f7f7fc;
    margin-top: 16px;
    .course-box {
      border-right: 1px solid #f7f7fc;
      border-bottom: 1px solid #f7f7fc;
      padding: 32px;
      width: 391px;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #222226;
        line-height: 32px;
      }
      .desc {
        font-size: 14px;
        color: #999aaa;
        line-height: 20px;
        margin-top: 4px;
      }
      .tag {
        display: inline-block;
        border-radius: 2px;
        border: 1px solid #f0f0f5;
        margin-top: 8px;
        margin-right: 10px;
        font-size: 12px;
        color: #999aaa;
        line-height: 18px;
        padding: 0 8px;
      }
      .bottom-content {
        margin-top: 20px;
        align-items: baseline;
        display: flex;
        .free {
          height: 20px;
          background: rgba(252, 85, 49, 0.1);
          border-radius: 2px;
          font-size: 14px;
          color: #fc5531;
          line-height: 20px;
          padding: 0 8px;
          margin-right: 8px;
        }
        .price {
          font-size: 18px;
          font-weight: 700;
          color: #fc5531;
          line-height: 16px;
          font-family: DINAlternate-Bold, DINAlternate;
          margin-right: 8px;
          em {
            font-size: 12px;
            font-style: inherit;
          }
        }
        .gray-price {
          font-size: 14px;
          font-family: DIN-Regular, DIN;
          color: #999aaa;
          line-height: 12px;
          text-decoration: line-through;
        }
        .flex {
          flex: 1;
        }
        .view {
          font-size: 12px;
          color: #999aaa;
          line-height: 12px;
        }
      }
    }
  }
}
.column {
  width: 391px;
  border-right: 1px solid #f7f7fc;
  border-bottom: 1px solid #f7f7fc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 32px;
  a {
    display: inherit;
    cursor: pointer;
    color: #222226;
    text-decoration: none;
    .bg-img {
      height: 107px;
      width: 80px;
      border-radius: 2px;
      background-repeat: no-repeat;
      background-position: center 0;
      background-size: cover;
      position: relative;
    }
  }
  .course-info {
    margin-left: 20px;
    .title {
      font-size: 16px;
      color: #222226;
      line-height: 24px;
      font-weight: 500;
      width: 300px;
    }
    .desc {
      font-size: 14px;
      color: #555666;
      line-height: 18px;
      display: block;
      margin-top: 4px;
    }
    .author {
      font-size: 12px;
      color: #999aaa;
      line-height: 18px;
      display: block;
      margin-top: 8px;
    }
    .bottom-content {
      align-items: center;
      padding-top: 12px;
      display: flex;
      .cur-price {
        font-size: 18px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: 700;
        color: #fc5531;
        em {
          font-size: 12px;
          font-style: inherit;
        }
      }
      .course-num {
        font-size: 12px;
        color: #999aaa;
        line-height: 12px;
        margin-left: 16px;
      }
      .view {
        font-size: 12px;
        color: #999aaa;
        line-height: 12px;
        margin-left: 4px;
      }
    }
  }
}
// 精选资源
.resources {
  margin-top: 20px;
  .card-header {
    padding-bottom: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    .header-title {
      margin-right: 36px;
      font-size: 16px;
      font-weight: 600;
    }
    .more-link {
      position: absolute;
      top: 4px;
      right: 0;
      font-size: 12px;
      font-weight: 300;
      color: #999aaa;
      line-height: 16px;
    }
  }
  .card-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    padding: 32px 31px 32px 30px;
    border-radius: 2px;
    border: 1px solid #f7f7fc;
    justify-content: space-between;
    .content-item {
      width: 137px;
      position: relative;
      cursor: pointer;
      .item-img {
        height: 141px;
        position: relative;
        background-image: url('../../assets/images/resource-bg-1.png');
        background-size: 100% 100%;
        padding: 20px 12px 12px;
        .file-type-icon {
          position: absolute;
          bottom: 4px;
          right: 4px;
          width: 24px;
          height: 24px;
          z-index: 1;
        }
      }
      .item-title {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        padding-top: 8px;
        color: #222226;
        height: 56px;
      }
      .item-extra {
        font-size: 12px;
        line-height: 16px;
        height: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-line-pack: center;
        align-content: center;
        padding-top: 4px;
        .flex {
          display: flex;
          i {
            font-size: 16px;
            margin-right: 4px;
            color: orange;
          }
          span {
            color: #999aaa;
            margin-right: 12px;
          }
        }
        .divide {
          border-left: 1px solid #f0f0f5;
          height: 12px;
          margin-top: 3px;
        }
        .text-gray {
          color: #999aaa;
          margin-left: 12px;
        }
      }
      .price {
        font-size: 18px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: 700;
        color: #fc5531;
        margin-top: 8px;
        margin-bottom: 10px;
        em {
          font-style: inherit;
          font-size: 12px;
        }
      }
    }
  }
}
.thumbnail {
  background-image: url('../../assets/images/resource-bg-2.png');
  overflow: hidden;
  position: relative;
  background-size: cover;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  padding: 32px 10px 0;
  transform: scale(1, 1);
  .file-tag {
    line-height: 18px;
    font-size: 12px;
    height: 18px;
  }
  .file-desc,
  .file-size {
    transform-origin: left;
    -webkit-transform-origin: left;
  }
  .file-size {
    font-size: 12px;
    -webkit-transform: scale(0.84);
    transform: scale(0.84);
  }
  .file-desc {
    font-weight: 400;
    line-height: 16px;
    margin-top: 4px;
    color: #999aaa;
    font-size: 12px;
    -webkit-transform: scale(0.84);
    transform: scale(0.84);
    height: 32px;
    margin-bottom: 10px;
  }
}
/**vip信息*/
.user-info {
  margin-top: 40px;
  .top-info {
    background-image: url('../../assets/images/vip-bg-1.png');
    background-size: cover;
    padding: 24px 24px 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    img {
      width: 54px;
      height: 54px;
      display: inline-block;
    }
    .info {
      display: inline-block;
      margin-left: 4px;
      .nick-name {
        font-size: 18px;
        font-weight: 500;
        color: #222226;
        line-height: 26px;
        max-width: 210px;
      }
      .vip-info {
        display: inline-block;
        font-size: 14px;
        color: #69421b;
        line-height: 22px;
      }
    }
  }
  .bottom-info {
    padding: 16px 24px 24px;
    background: #fafafa;
    border-radius: 0 0 2px 2px;
    .top-content {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      .welfare {
        height: 146px;
        width: 130px;
        display: inline-block;
        background-image: url('../../assets/images/vip-package.png');
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        background-size: cover;
        position: relative;
        .text {
          position: absolute;
          top: 42px;
          left: 15px;
          color: #cb3f2b;
        }
        em {
          font-size: 34px;
          font-weight: 700;
          font-family: DINAlternate-Bold, DINAlternate;
          color: #cb3f2b;
          line-height: 40px;
          font-style: inherit;
        }
      }
      .rights {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 9px 0;
        margin-left: 10px;
        i {
          color: orange;
        }
        span {
          font-size: 14px;
          color: #69421b;
          line-height: 22px;
          margin-left: 4px;
          font-family: PingFangSC-Regular, PingFang SC;
        }
      }
    }
    .vip-button {
      background-image: url('../../assets/images/vip-button.png');
      width: 250px;
      height: 32px;
      display: flex;
      justify-content: space-around;
      background-size: 250px 32px;
      align-items: center;
      border-radius: 15px;
      margin-top: 22px;
      .preferential {
        font-size: 14px;
        font-weight: 500;
        color: #925417;
        line-height: 20px;
      }
      .open-vip {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        line-height: 20px;
      }
    }
  }
}
.upload-sidebar {
  background: #fff;
  border: 1px solid #f0f0f2;
  border-radius: 2px;
  position: relative;
  margin-top: 24px;
  .upload-button {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 32px 24px 8px;
    .btn {
      width: 250px;
      height: 48px;
      background: #fff;
      border-radius: 40px;
      border: 1px dashed #ccccd8;
      font-size: 14px;
      color: #555666;
      cursor: pointer;
      i {
        margin-right: 5px;
      }
    }
  }
  .upload-button,
  .upload-button .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .user-menu {
    li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0 24px;
      height: 42px;
      cursor: pointer;
      color: #555666;
      i {
        margin-right: 8px;
      }
      .tip {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: right;
        font-size: 12px;
        color: #777888;
        em {
          font-style: normal;
          font-size: 22px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: 700;
          color: #fc5531;
        }
      }
    }
    .info-detail {
      margin-left: 16px;
    }
  }
  .user-tip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 16px 24px;
    .el-carousel {
      margin-left: 8px;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 18px;
      line-height: 18px;
      color: #828795;
      font-size: 12px;
      span {
        max-width: 160px;
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      em {
        font-style: normal;
        font-size: 12px;
        font-family: DINAlternate-Bold, DINAlternate;
        color: #fc5531;
      }
    }
  }
}
.latest-file-card {
  padding: 0 16px 8px;
  border: 1px solid #f0f0f2;
  border-radius: 2px;
  background-color: #fff;
  margin-top: 24px;
  .title {
    height: 49px;
    color: #555666;
    border-bottom: 1px solid #f5f6f7;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-left: -16px;
    padding-left: 24px;
    margin-right: -16px;
  }
  ul {
    li {
      margin-top: 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;

      .rank {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        margin-right: 8px;
        margin-left: 4px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        border-radius: 2px;
        z-index: 2;
        font-family: DINAlternate-Bold, DINAlternate;
      }

      .bg {
        width: 18px;
        height: 16px;
        font-size: 20px;
        font-weight: 700;
        color: #999aaa;
        line-height: 16px;
      }
    }
    li:first-child {
      .bg {
        color: #f87e62;
      }
    }
    li:nth-child(2) {
      .bg {
        color: #fab216;
      }
    }
    li:nth-child(3) {
      .bg {
        color: #be7c14;
      }
    }
  }
  .open-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 24px;
    width: 250px;
    line-height: 24px;
  }
}
.shadow-card {
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  margin-top: 24px;
  .title {
    padding: 12px 18px;
    border-bottom: 1px solid #f5f6f7;
    font-size: 16px;
    font-weight: 500;
  }
  .shadow-box {
    padding: 18px 24px;
    .info-user {
      width: 170px;
    }
    li {
      a {
        display: flex;
        color: #222226;
        .imgs {
          width: 56px;
          height: 56px;
          margin-right: 16px;
          border-radius: 50%;
        }
      }
      .name {
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 500;
      }
      .description {
        max-height: 32px;
        margin: 4px 0 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #777888;
      }
      .extension {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: #999aaa;
        .dot {
          display: inline-block;
          margin: 0px 4px 0;
          vertical-align: middle;
        }
      }
    }
    li:first-child{
      margin-top: 0px;
    }
    li{
      margin-top: 20px;
    }
    
  }
}
</style>
